<template>
	<view class="pages">

		<cu-custom bgColor="" :isBack="true" :isTitle="false">
			<block slot="backText" class="titilestyle">{{title}}</block>

		</cu-custom>

		<view class="box" :style="[{height:swiperHeight+'px'}]">
			<scroll-view scroll-y="true" class="boxS">

				<text class="box-title">{{total}}张可使用</text>
				<view class="box-item margin-top animation-fade" v-for="(item,index) in couponList"
					v-if="item.status==0" @click="checkCoupon(index)">
					<view class="left-item middle">
						<text class="text-price left-top">{{item.money|numFilter}}</text>
						<text class="left-bot">满{{item.condition|numFilter}}可用</text>

					</view>
					<view class="right-box">
						<text class="right-top">{{item.title}}</text>
						<text class="right-bottom">{{item.use_end_time}}</text>

					</view>
					<view class="right-check middle">
						<radio :value="index" :checked="index == curCoupon" color="#0081ff"
							style="transform:scale(0.8)" />

					</view>
				</view>

			<!--<view class="box-title margin-top" v-if="nototal>0">{{total}}暂不可用</view>

				<view class="box-item margin-top" v-for="(item,index) in couponList" v-if="item.status!=0"
					@click="checkCoupon(index)">
					<view class="left-item middle graybold">
						<text class="text-price left-top graybold">{{item.money|numFilter}}</text>
						<text class="left-bot graybold">满{{item.condition|numFilter}}可用</text>

					</view>
					<view class="right-box graybold">
						<text class="right-top graybold">{{item.title}}</text>
						<text class="right-bottom">{{item.use_end_time}}</text>

					</view>

				</view>
 -->



			</scroll-view>

		</view>
	</view>

</template>

<script>
	export default {
		name: "User",
		data() {
			return {
				title: "选择优惠券",
				StatusBar: this.Custom,
				swiperHeight: 0,
				couponList: [],
				total: 0,
				curCoupon: -1,
				shop_id: '',
				type: 2,
				status: 0,
				id: -1,
				condtion: "",
				nototal:0
			}
		},
		filters: {
			numFilter(value) {
				return parseFloat(value)
			}
		},
		onLoad(option) {
			(option.shop_id && option.type) ? (() => {
				this.shop_id = option.shop_id;
				this.type = option.type;
				this.status = option.status;
				this.condtion = option.condtion;
				if (option.id) {
					this.id = option.id;
				}
				this.load();
			})() : (() => {
				this.load();
			})();
		},
		mounted() {
			this.getInfo().then((e) => {

				this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height);

			})

		},
		methods: {

			load() {
				this.apiRequest('/buyer/couponList', {
					area_id: uni.getStorageSync('area_id'),
					condition: this.condtion,
					shop_id: this.shop_id,
					type: this.type,
					status: parseInt(this.status),
				}).then(res => {
					let k = 0;
					for (let i in res.data.data) {
						if (res.data.data[i].status == 0) {
							k++;
						}
						
						if (res.data.data[i].id == this.id) {
							this.curCoupon = i;
						}
					}
					this.total = k;
					this.couponList = res.data.data
				});

			},

			checkCoupon(index) {
				if (index == this.curCoupon) {
					index = -1;
					uni.setStorageSync("selectCoun", -1);
				} else {
					uni.setStorageSync("selectCoun", this.couponList[index].id);
				}
				this.curCoupon = index;
				let pages = getCurrentPages();
				let beforePage = pages[pages.length - 2];
				uni.navigateBack({
					delta: 1,
					success: function() {
						beforePage.$vm.upData(index);
					}

				});

			},


		}




	}
</script>

<style scoped>
	.box {
		width: 96%;
		margin-left: 2%;

	}

	.boxS {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.box-title {
		width: 100%;

		font-size: 24upx;
		font-weight: 500;
		color: #333333;
		padding-left: 5%;
	}

	.box-item {
		width: 96%;
		margin-left: 2%;
		height: 180upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		display: flex;
		flex-direction: row;

	}

	.left-item {
		width: 25%;
		height: 90%;
		display: flex;
		flex-direction: column;
	}

	/* 	.left-item text{
		padding: 5upx 10upx;
	} */
	.left-top {
		font-size: 48upx;
		font-weight: 800;
		color: #DF3636;

	}

	.left-bot {
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
	}

	.right-box {
		width: 60%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.right-box text {
		padding: 5upx 10upx;
	}

	.right-top {
		width: 96%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-size: 28upx;
		font-weight: 800;
		color: #333333;

	}

	.right-bottom {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
	}

	.right-check {
		width: 15%;
		height: 100%;

	}

	.graybold {
		font-weight: 800;
		color: #999999;
	}
</style>
